@import "./style";

#dataV-infoPlatform {
  width: 100%;
  height: 100%;
  color: #d3d6dd;
  background-color: #0a113f;
  .bg {
    width: 100%;
    height: 100%;
    background-color: #0a113f;
    //padding: 0.2rem 0.2rem 0 0.2rem;
    //background-image: url("~@/assets/images/datavBg.png");
    //background-size: cover;
    //background-position: center center;
  }

  .dataV-body {
    width: 100%;
    height: 100%;
    padding-top: 0.1rem;
    // 平行四边形
    .react-left {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }
    .react-right {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(45deg);
      .react-before {
        position: absolute;
        left: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }
      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }
    // 内容区
    .dataV-container{
      height: 100%;
      //margin-top: 0.2rem;
      display: flex;
      flex-direction: row;
      .title{
        .title-icon{
          width:0.1rem;
          background-color: #00FFFF;
        }
        .text{
          color:  #00FFFF;
        }
      }
      .left{
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .center{
        width: 60%;
        height: 100%;
        overflow: hidden;
      }
      .right{
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
    }
  }
}
//layout 布局
.layout{
  $color-1: #F25E25;
  $color-2: #FDB627;
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  .layout-item{
    //width: 50%;
  }
  .layout-wrapper{
    padding: 0 0.25rem;
    .wrapper-item {
      font-size:0.3rem;
      margin-top: 0.12rem;
      &::before {
        width: 0.4rem;
        height: 0.4rem;
        margin: 0 0.0625rem;
        content: '';
        display: inline-block;
        vertical-align: middle;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
    }
    .item-icon-1 {
      .font-1 {
        padding: 0 0.0625rem;
        color: $color-1;
      }

      &::before {
        //background-image: url('~@/assets/images/icon-8.png');
      }
    }
    .item-icon-2 {
      .font-2 {
        padding: 0 0.0625rem;
        color: $color-2;
      }

      &::before {
        //background-image: url('~@/assets/images/icon-5.png');
      }
    }
  }
}
